<!DOCTYPE html>
<html>
	<script src="../../dist/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,html{
				margin: 0px;
				padding: 0px;
			}
			html{
				background-color:  gainsboro;
			} 
			.div1 {
				width: 60%;
				padding: 15px;
				height: 70%;
				overflow-y: hidden;
				left: 33%;
				padding: 5% 10%;
				margin: 10% auto 50px auto;
				border-radius: 15px;
				border: white 1px solid;
			}
			.div2 {
				border-bottom: 1px white solid;
				font-weight: bold;
				font-size: 1.5em;
				margin-bottom: 20px;
				padding: 20px;
			}
			
			<style type="text/css">
			.outdiv {
				border: while 1px solid;
				padding: 8% 120px;
				border-radius: 15px;
			}
			td,th {
				padding: 5px 10px !important;
			}
			table{
				margin:50px auto;
			}
			.title {
				margin-bottom: 30px;
				font-size: 2em;
				border-bottom: 1px solid white;
				padding: 25px;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="../../css/bookstap/bootstrap.css" />
	</head>

	<body style="background-color: rgba(000,000,000,0)" >	
		<div class="div1">
			<form action="" class="row form-group">
				<div class="div2">查看订单信息：</div>
				<input class="form-control" type="text" name="id" id="id" value="" placeholder="请输入查看订单的ID"/>
			</form>
			<button id="ctlBtn" class="btn btn-success">提交</button>
		</div>
	</body>
<script type="text/javascript">
	var str="<table id='tab' border='1px' cellpadding='0' cellspacing='0'><tr><th>id</th><th>userid</th><th>price</th><th>oderid</th><th>number</th><th>phone</th><th>adress</th><th>code</th></tr></table>";
	$(document).ready(function() {
		$("#ctlBtn").click(function(){
		var dat= $("#id").serialize();
		$("body").html(str);
		$.ajax({
			url: "/Second_Project/dirorder",
			data:dat, 
			type: "post",
			dataType: "json",
			success: function(data) {
				console.log(data)
				/*这个方法里是ajax发送请求成功之后执行的代码*/
				showData(data); //我们仅做数据展示
			},
			error: function(msg) {
				console.log("error")
			}
		});
		//展示数据
		function showData(data) {
			var str = ""; //定义用于拼接的字符串
			for(var i = 0; i < data.length; i++) {
				//拼接表格的行和列
				str = "<tr><td>" + data[i].id + "</td><td>" + data[i].userid +"</td><td>"+data[i].price+
					"</td><td>" + data[i].orderid + "</td><td>" + data[i].number +
					"</td><td>" + data[i].phone + "</td><td>" + data[i].adress +
					"</td><td>" + data[i].code +
					"</td></tr>";
				//追加到table中
				$("#tab").append(str);
			}
		}
	})
		})
</script>
</html>